<template>
  <div class="dashboard-container">
    <!-- <header class="top_header is_fixed">
      <div>
        <svg-icon
          icon-class="callphone"
          class-name="callphone"
          style="fill: var(--color-primary);"
        ></svg-icon>
        通话费用：<span class="is_num">556.68</span>
      </div>
      <div class="is_fixed">
        <div>快递100余量： <span class="is_num">68073条</span></div>
        <el-divider direction="vertical"></el-divider>
        <div>
          易联通电话余额：
          <YLTMsg>
            <span class="is_num">991.16元</span>
          </YLTMsg>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div>
          诚立业短信条数：
          <CLYMsg>
            <span class="is_num">
              14031条
            </span>
          </CLYMsg>
        </div>
      </div>
    </header> -->
    <main class="">
      <List>
        <template #default>
          <div class="is_fixed default_slot" style="justify-content: flex-start;">
            <ul class="cus_tabs">
              <li :class="{ is_active: item == date }" v-for="item in dateList" :key="item" @click="DataChange(item)">
                {{ item }}
              </li>
            </ul>
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy / MM / dd" v-model="dateRange" type="daterange"
              range-separator=" ~ " start-placeholder="开始日期" end-placeholder="结束日期" style="width: 260px;flex-shrink: 0;"
              :clearable="false">
            </el-date-picker>
            <el-select v-model="groupId" placeholder="选择客服组" :clearable="false">
              <template #prefix>
                <svg-icon icon-class="customergroup" class-name="icon_svg"></svg-icon>
              </template>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="groupId" placeholder="选择客服" :clearable="false">
              <template #prefix>
                <svg-icon icon-class="customer" class-name="icon_svg"></svg-icon>
              </template>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="groupId" placeholder="选择厂商" :clearable="false">
              <template #prefix>
                <svg-icon icon-class="factory" class-name="icon_svg"></svg-icon>
              </template>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="groupId" placeholder="下单类型" :clearable="false">
              <template #prefix>
                <svg-icon icon-class="ordertype" class-name="icon_svg"></svg-icon>
              </template>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-refresh-right" style="padding: 10px;"></el-button>
            <el-button type="primary">导出统计</el-button>
          </div>
        </template>
      </List>
    </main>

    <div class="graphic_box">
      <Graphic />
    </div>
  </div>
</template>

<script>
import List from "./modules/list";
import Graphic from "./modules/graphic";
import dayjs from "dayjs";
import timer from "@/assets/icons/svg/timer.svg";
import YLTMsg from "./components/YLTMsg.vue";
import CLYMsg from "./components/CLYMsg.vue";
export default {
  name: "dashboard",
  data() {
    return {
      date: "今日",
      dateList: ["上月", "昨日", "今日", "本月"],
      dateRange: [
        dayjs().format("YYYY-MM-DD"),
        dayjs()
          .add(1, "day")
          .format("YYYY-MM-DD")
      ],
      groupId: -1,
      customerId: -1,
      factoryId: -1,
      typeId: -1,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  components: { List, Graphic, YLTMsg, CLYMsg },
  methods: {
    /**
     * dayjs() 需要格式化的时间
     * @param d 需要处理的dayjs() 数据
     */
    DateFormat(d, format = "YYYY-MM-DD") {
      return d.format(format);
    },
    DataChange(item) {
      if (item == this.date) return;
      this.date = item;
      let startTime = "";
      let endTime = "";
      switch (item) {
        case "上月":
          startTime = this.DateFormat(
            dayjs()
              .subtract(1, "month")
              .startOf("month")
          );
          endTime = this.DateFormat(dayjs().startOf("month"));
          break;
        case "昨日":
          startTime = this.DateFormat(dayjs().subtract(1, "day"));
          endTime = this.DateFormat(dayjs());
          break;
        case "今日":
          startTime = this.DateFormat(dayjs());
          endTime = this.DateFormat(dayjs().add(1, "day"));
          break;
        case "本月":
          startTime = this.DateFormat(dayjs().startOf("month"));
          endTime = this.DateFormat(
            dayjs()
              .add(1, "month")
              .startOf("month")
          );
          break;
      }
      this.dateRange = [startTime, endTime];

      // ------------------
      // 时间处理完后需要进行的操作
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// @import "@/assets/styles/element-variables.scss";
$p: 10px;
$m: 10px;
$mbt: 0px 0;
$p1: 15px 25px;
$baseFontSize: 16px;
$baseBgc: #f5f5f5;
$baseHoverBgc: #cac3c3;
$wBgc: white;
$bRadius: 5px;
$themeColor: var(--color-primary);

@mixin box {
  padding: $p1;
  background-color: $wBgc;
  border-radius: $bRadius;
}

.icon_svg {
  font-size: 14px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-left: 5px;
}

.is_fixed {
  display: flex;
  align-self: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-container {
  min-height: 100%;
  padding: $p $m;
  font-size: $baseFontSize;
  background-color: $baseBgc;

  .top_header {
    @include box;
  }

  .el-divider {
    margin: 0 15px;
  }

  .is_num {
    color: $themeColor;
  }

  main {
    margin: $mbt;
    @include box;

    .el-select {
      width: 190px;
    }
  }
}

ul.cus_tabs {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;

  li {
    display: inline-block;
    border-radius: 15px;
    padding: 5px 15px;
    background-color: $baseBgc;
    margin-right: 10px;
    font-size: 12px;
    color: #b29b9c;
    cursor: pointer;

    // &:hover {
    //   background-color: $baseHoverBgc;
    // }

    &.is_active {
      color: $wBgc;
      background-color: $themeColor;
    }
  }
}

.default_slot {
  :deep(.el-date-editor) {
    .el-icon-date {
      &::before {
        // content: "";
        // width: 14px;
        // height: 14px;
        // display: inline-block;
        // background: url("/svg/timer.svg");
      }
    }
  }
}
</style>
